export function getSteps() {
  return [
    {
      target: "#step1",
      title: "步骤 1: 项目配置",
      content: (
        <div>
          <p>👋 欢迎使用剪映助手！</p>
          <p>🎯 在这里您可以配置项目的基本设置，包括：</p>
          <ul>
            <li>📏 画布尺寸和帧率</li>
            <li>✏️ 文本内容和样式</li>
            <li>🎨 文本颜色和背景</li>
            <li>🎭 文本动画效果</li>
            <li>🎬 视频素材配置</li>
          </ul>
          <p>💡 点击左侧树形菜单中的各个配置项来开始设置！</p>
        </div>
      ),
      placement: "right" as const,
    },
    {
      target: "#step2",
      title: "步骤 2: 预览效果",
      content: (
        <div>
          <p>🎬 这里是视频预览区域</p>
          <p>您可以：</p>
          <ul>
            <li>📹 查看实时预览效果</li>
            <li>⏯️ 播放和暂停视频</li>
            <li>📊 查看当前配置信息</li>
          </ul>
          <p>💡 配置完成后点击"生成预览"按钮查看效果！</p>
        </div>
      ),
      placement: "left" as const,
    },
    {
      target: "#step3",
      title: "步骤 3: 详细配置",
      content: (
        <div>
          <p>⚙️ 右侧是详细配置面板</p>
          <p>当您点击左侧配置项时：</p>
          <ul>
            <li>📋 这里会显示具体的配置表单</li>
            <li>🎚️ 可以调整各种参数</li>
            <li>🔄 配置会实时保存</li>
          </ul>
          <p>💡 尝试点击左侧不同的配置项看看效果！</p>
        </div>
      ),
      placement: "left" as const,
    },
  ];
}
